<!--
 * @Description: 角色信息展示组件
 * @Author: [您的名字]
 * @Date: [创建日期]
 * @LastEditors: [最后编辑者]
 * @LastEditTime: [最后编辑时间]
-->
<template>
  <!-- 角色信息主容器 -->
  <div class="character-information">
    <!-- 标题区域：显示页面主标题 -->
    <el-row class="header-section">
      <el-col>
        <div class="title">
          <h2 class="title-text">角色信息</h2>
        </div>
      </el-col>
    </el-row>

    <!-- 表格区域：展示角色列表数据 -->
    <div class="table-section">
      <el-table 
        :data="characterList" 
        border 
        stripe
        style="width: 100%"
        :header-cell-style="{ background: '#f5f7fa' }"
        v-loading="loading"
      >
        <!-- 角色ID列：使用标签样式展示 -->
        <el-table-column prop="id" label="角色ID" width="180">
          <template slot-scope="scope">
            <el-tag size="medium" type="info">{{ scope.row.id }}</el-tag>
          </template>
        </el-table-column>
        
        <!-- 角色昵称列：自定义样式展示 -->
        <el-table-column prop="roleName" label="角色昵称" width="200">
          <template slot-scope="scope">
            <div class="role-name">
              <span>{{ scope.row.roleName }}</span>
            </div>
          </template>
        </el-table-column>
        
        <!-- 创建时间列：带时间图标 -->
        <el-table-column prop="createTime" label="创建时间" width="180">
          <template slot-scope="scope">
            <i class="el-icon-time"></i>
            <span style="margin-left: 5px">{{ scope.row.createTime }}</span>
          </template>
        </el-table-column>
        
        <!-- 数量列：使用绿色标签展示 -->
        <el-table-column prop="number" label="数量">
          <template slot-scope="scope">
            <el-tag type="success" size="medium">{{ scope.row.number }}</el-tag>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 空数据提示：当无数据且不在加载状态时显示 -->
    <div v-if="characterList.length === 0 && !loading" class="empty-data">
      <i class="el-icon-warning-outline"></i>
      <p>暂无角色数据</p>
    </div>
  </div>
</template>

<script>
/**
 * @description 角色信息组件
 */
export default {
  name: 'CharacterInformation', // 组件名称

  /**
   * @description 组件数据
   * @return {Object}
   */
  data() {
    return {
      characterList: [], // 角色列表数据
      loading: false    // 加载状态标识
    }
  },

  methods: {
    /**
     * @description 查询角色列表数据
     * @return {void}
     */
    queryCharacterList() {
      this.loading = true; // 开启加载状态
      this.$axios.get('api/role/queryAll')
        .then(res => {
          if (res.data.code == 200) {
            this.characterList = res.data.data;
          }
        })
        .finally(() => {
          this.loading = false; // 关闭加载状态
        });
    }
  },

  /**
   * @description 组件创建时的生命周期钩子
   * @return {void}
   */
  created() {
    this.queryCharacterList(); // 初始化时获取角色列表数据
  }
}
</script>

<style scoped>
/* 主容器样式 */
.character-information {
  background-color: #fff;
  padding: 24px;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
  min-height: 400px;
}

/* 头部区域样式 */
.header-section {
  margin-bottom: 24px;
}

/* 标题文本样式 */
.title-text {
  margin: 0;
  color: #303133;
  font-size: 20px;
  font-weight: 600;
  position: relative;
  padding-left: 12px;
}

/* 标题装饰线样式 */
.title-text::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 18px;
  background-color: #409EFF;
  border-radius: 2px;
}

/* 表格区域样式 */
.table-section {
  margin-bottom: 24px;
}

/* 角色名称样式 */
.role-name {
  display: flex;
  align-items: center;
  font-weight: 500;
}

/* 空数据提示样式 */
.empty-data {
  text-align: center;
  padding: 40px 0;
  color: #909399;
}

/* 空数据图标样式 */
.empty-data i {
  font-size: 48px;
  margin-bottom: 16px;
}

/* 空数据文本样式 */
.empty-data p {
  margin: 0;
  font-size: 14px;
}

/* 响应式布局样式 */
@media screen and (max-width: 768px) {
  .character-information {
    padding: 16px;
  }
  
  .title-text {
    font-size: 18px;
  }
}
</style>